<template>
  <div v-loading="loading">
    <el-descriptions
      :title="form.demandTitle"
      :column="2"
      :colon="true">
      <el-descriptions-item label="进场时间">{{ form.entryTime }}</el-descriptions-item>
      <el-descriptions-item label="需求类型">{{form.demandType | demandType}}</el-descriptions-item>
      <el-descriptions-item label="付款方式">{{form.paymentWay | paymentWay}}</el-descriptions-item>
      <el-descriptions-item label="类别">{{form.productType | productType}}</el-descriptions-item>
      <el-descriptions-item label="详细地址" span="2">{{ form.province }}{{ form.city }}{{ form.area}}{{ form.address }}</el-descriptions-item>
      <el-descriptions-item label="工期进度">{{ form.schedule }}</el-descriptions-item>
      <el-descriptions-item label="发票">{{form.invoiceWay | invoiceWay}}</el-descriptions-item>
      <el-descriptions-item label="联系人">{{ form.contactName }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{form.contactPhone}}</el-descriptions-item>
    </el-descriptions>
    <div class="label">详细介绍:</div>
    <div class="content">{{ form.intro }}</div>
  </div>
</template>

<script>
import { demandDetail } from "@/api/demand";
import { demandType, productType, payType, invoiceType, const2Arr } from "@/consts";
export default {
  name: "DemandDetail",
  props:{
    id: {
        default: ''
    }
  },
  data() {
    return {
      form: {},
      loading: true,
    };
  },
  created() {
    this.demandDetail();
  },
  filters: {
    demandType(val) {
      return val ? const2Arr(demandType).find((item) => item.value === val).label : "";
    },
    productType(val) {
      return val ? const2Arr(productType).find((item) => item.value === val).label : "";
    },
    paymentWay(val) {
      return val ? const2Arr(payType).find((item) => item.value === val).label : "";
    },
    invoiceWay(val) {
      return val ? const2Arr(invoiceType).find((item) => item.value === val).label : "";
    },
  },
  methods: {
    demandDetail() {
      demandDetail({ id: this.id }).then((res) => {
        this.form = res.result;
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>

::v-deep .el-descriptions__title {
  font-weight: bold;
  font-size: 22px;
  color: #333333;
}

::v-deep .el-descriptions,
.label,
.content {
  font-size: 18px;
}

::v-deep .el-descriptions-item__label,
.label {
  color: #808080;
}

::v-deep .el-descriptions-item__content,
.content {
  color: #333;
}

.content {
  padding-top: 20px;
}

::v-deep .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
  padding-bottom: 20px;
}
</style>
